<template>
  <div class="print">
    <el-button class="btn" type="primary" @click="printOrder">打印</el-button>
    <div class="print-area" v-for="(item,index) in list" :key="index">
      <div class="title">
        <div class="title-text">
          锋鸟智慧仓储系统<br/>扫码查询
        </div>
      </div>
      <div class="main" v-for="(i,ind) in item" :key="ind">
        <div class="main-form">
          <div class="item">
            <div class="item-label">货品：</div>
            <div class="item-value">{{i.areaName}}</div>
          </div>
          <div class="item">
            <div class="item-label">货码：</div>
            <div class="item-value">{{i.remark}}</div>
          </div>
          <div class="item">
            <div class="item-label">仓位：</div>
            <div class="item-value">{{i.areaCode}}</div>
          </div>
        </div>
        <div class="main-qrcode">
          <vueqr class="qrCode" :text="i.areaCode" :size="90" :margin="0" />
          <div class="qrCode-text">{{i.areaCode}}</div>
        </div>
      </div>
      <div class="logo">
        <img src="@/assets/logo/fn-bg.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { getListForPrint1 } from "@/api/mes/wm/wmstock";
import vueqr from 'vue-qr'
export default {
  name: 'Print',
  components: {
    vueqr
  },
  data() {
    return {
      list: [],
    }
  },
  computed: {
    locationId() {
      const ids = this.$route.query.locationId
      return ids.split(',')
    },
    type() {
      const type = this.$route.query.type
      return type
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      let params = {
        locationIdArr: null,
        areaIdArr: null,
        pageNum: 1,
        pageSize: 10000
      } 
      if(this.type=='area'){
        params.areaIdArr = this.locationId.map(item => {
          return +item
        })
      }else{
        params.locationIdArr = this.locationId.map(item => {
          return +item
        })
      }
      getListForPrint1(params).then(res => {
        this.list = res.rows
        this.list = this.formatList(res.rows)
        // console.log(this.list,);
      })
    },
    formatList(arr){
      const groupSize = 3; // 每组的大小
      const result = []
      for (let i = 0; i < arr.length; i += groupSize) {
        result.push(arr.slice(i, i + groupSize))
      }
      return result
    },
    printOrder() {
      window.print();
    },
  }
}
</script>

<style lang="scss" scoped>
@page {
  size: A5 portrait; /* 或 landscape */
  margin: 0;      /* 自定义页边距 */
}
@media print {
  // body {
  //   width: 148mm;
  //   height: 210mm;
  //   margin: 0;
  //   padding: 0 20mm;
  //   box-sizing: border-box;
  // }

  .btn{
    display: none;
  }

  /* 你要打印的区域 */
  .print-area {
    width: 148mm;
    height: 210mm;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    .title{
      font-size: 16px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 40px 0;
      &-text{
        text-align: center;
      }
    }
    .main{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50px;
      &:last-child{
        margin-bottom: 0;
      }
      &-form{
        flex: 0.9;
        .item{
          display: flex;
          width: 100%;
          margin-bottom: 20px;
          border-bottom: 1px solid #000;
          padding: 0 10px;
          font-size: 20px;
          &-label{
            // width: 100px;
            text-align: left;
          }
          &-value{
            flex: 1;
            padding-left: 10px;
          }
        }
      }
      &-qrcode{
        width: 100px;
        height: 100px;
        .qrCode-text{
          text-align: center;
          font-size: 14px;
        }
      }
    }
    .logo{
      width: 100%;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      img{
        width: 120px;
        height: 50px;
      }
    }
  }

  /* 其他打印优化样式，比如去除按钮等 */
  .no-print {
    display: none !important;
  }
}


.print {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding: 50px;
  position: relative;
  .btn{
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .print-area {
    width: 148mm;
    height: 210mm;
    margin: 0;
    padding: 0 20mm;
    box-sizing: border-box;
    position: relative;
    .title{
      font-size: 16px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 40px 0;
      &-text{
        text-align: center;
      }
    }
    .main{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50px;
      &:last-child{
        margin-bottom: 0;
      }
      &-form{
        flex: 0.9;
        .item{
          display: flex;
          width: 100%;
          margin-bottom: 20px;
          border-bottom: 1px solid #000;
          padding: 0 10px;
          font-size: 20px;
          &-label{
            // width: 100px;
            text-align: left;
          }
          &-value{
            flex: 1;
            padding-left: 10px;
          }
        }
      }
      &-qrcode{
        width: 100px;
        height: 100px;
        .qrCode-text{
          text-align: center;
          font-size: 14px;
        }
      }
    }
    .logo{
      width: 100%;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      img{
        width: 120px;
        height: 50px;
      }
    }
  }
}
</style>